<template>
	<view class="content">
		<view class="content-one">
		<view class="nav">
			
			<view class="" @click="toSearchPage">
				<!-- <input type="number" placeholder="请输入订单号" disabled="true"> -->
				<u-input class="input-number" placeholder="请输入订单号" />
			</view>
			<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
			<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tab-scroll_box">
					<!-- 选项卡类别列表 -->
					<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"  :class="{'active':isActive==index}" @click="chenked(index)">
							{{item.name}}
					</view>

	
				</view>
			</scroll-view>
		</view>
		<!-- <view style="top:250rpx;position: absolute;"></view> -->
		<view class="swiper-wrapper">
		
			<swiper @change="change" :current="isActive" class="swiper-content" :style="fullHeight">
				
				<swiper-item class="swiperitem-content">
					<div class="empty" v-if="orderListCanTake == [] || orderListCanTake == '' || orderListCanTake == null">
							<view>
							  <image style="width: 320rpx; height: 240rpx; margin-left: 30rpx;" src="@/static/nodata.png">
						
							  </image>
							</view>
							<view>
							  <p>没有找到相关的订单信息</p>
							  <p>可以试试登录哦</p>
							</view>
		
					</div>
					<div v-if="
					    !(orderListCanTake == [] || orderListCanTake == '' || orderListCanTake == null)
					  "
								class="all-box">
					<scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true" @scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
						<view class="orders-item" v-for="(item, index) in orderListCanTake" :key="index">
							<div class="content-item">
								<view class="item-left" @click="toAvailableOrderOne(item.orderId)">
									<view class="border-left">
										<view class="title-name-top">
											<view class="goods-info-name">物品信息：</view>
											<view class="title-intro-top">
												{{item.remark}}
											</view>
										</view>
										<br>
										<view class="title-name">
											<view class="goods-info">地址：</view>
											<view class="title-intro">
												{{item.orderFromAddress}}
												
											</view>
											<!-- <view class="show-order-detail">
												查看详情
											</view> -->
										</view>	
										
									</view>

								</view>
								<view class="item-right" @click="takeOrder(item.orderId,index)">
									<view class="click-img">
										<image style="width: 80rpx;height: 80rpx;" src="@/static/tabbar/orderNo.png" alt=""></image>
									</view>
									<view class="oldKeyItem">
										<view class="clickItem">抢单</view>
									</view>
								</view>								
							</div>

						</view>
						<view class="" style="height: 70rpx;">
						
						</view>
					</scroll-view>	
					</div>
				</swiper-item>
				<swiper-item class="swiperitem-content">
					<div class="empty" v-if="orderListTake == [] || orderListTake == '' || orderListTake == null">
							<view>
							  <image style="width: 320rpx; height: 240rpx; margin-left: 30rpx;" src="@/static/nodata.png">
						
							  </image>
							</view>
							<view>
							  <p>没有找到相关的订单信息</p>
							  <p>可以试试登录哦</p>
							</view>
		
					</div>
					<div v-if="
					    !(orderListTake == [] || orderListTake == '' || orderListTake == null)
					  "
								class="all-box">
					<scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true" @scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
						<view class="orders-item" v-for="(item, index) in orderListTake" :key="index">
							<div class="content-item">
								<view class="item-left" @click="toAvailableOrderTwo(item.orderId)">
									<view class="border-left">
										<view class="title-name-top">
											<view class="goods-info-name">物品信息：</view>
											<view class="title-intro-top">
												{{item.remark}}
											</view>
										</view>
										<br>
										<view class="title-name">
											<view class="goods-info">地址：</view>
											<view class="title-intro">
												{{item.orderFromAddress}}
											</view>
										</view>	
														
									</view>

								</view>
								<view class="item-right" @click="toTakeOrder(item.orderId,index,item.orderNumber)">
									<view class="click-img">
										<image style="width: 80rpx;height: 80rpx;" src="@/static/tabbar/orderIn.png" alt=""></image>
									</view>
									<view class="oldKeyItem-finish">
										<view class="clickItem">取单</view>
									</view>
								</view>								
							</div>
						</view>
						<view class="" style="height: 70rpx;">
						
						</view>
					</scroll-view>	
					</div>
				</swiper-item>
				
				<swiper-item class="swiperitem-content">
					<div class="empty" v-if="orderListTran == [] || orderListTran == '' || orderListTran == null">
							<view>
							  <image style="width: 320rpx; height: 240rpx; margin-left: 30rpx;" src="@/static/nodata.png">
						
							  </image>
							</view>
							<view>
							  <p>没有找到相关的订单信息</p>
							  <p>可以试试登录哦</p>
							</view>
		
					</div>
					<div v-if="
						!(orderListTran == [] || orderListTran == '' || orderListTran == null)
					  "
								class="all-box">
					<scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true" @scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
						<view class="orders-item" v-for="(item, index) in orderListTran" :key="index">
							<div class="content-item">
								<view class="item-left" @click="toAvailableOrderThree(item.orderId)">
									<view class="border-left">
										<view class="title-name-top">
											<view class="goods-info-name">物品信息：</view>
											<view class="title-intro-top">
												{{item.remark}}
											</view>
										</view>
										<br>
										<view class="title-name">
											<view class="goods-info">地址：</view>
											<view class="title-intro">
												{{item.orderFromAddress}}
												
											</view>
											<!-- <view class="show-order-detail">
												查看详情
											</view> -->
										</view>	
										
									</view>

								</view>
								<view class="item-right" @click="tranOrder(item.orderId,index)">
									<view class="click-img">
										<image style="width: 80rpx;height: 80rpx;" src="@/static/tabbar/orderOut.png" alt=""></image>
									</view>
									<view class="oldKeyItem">
										<view class="clickItem">派送</view>
									</view>
								</view>								
							</div>

						</view>
						<view class="" style="height: 70rpx;">
						
						</view>
					</scroll-view>	
					</div>
				</swiper-item>


				<swiper-item class="swiperitem-content">
					<div class="empty" v-if="orderListConfirm == [] || orderListConfirm == '' || orderListConfirm == null">
							<view>
							  <image style="width: 320rpx; height: 240rpx; margin-left: 30rpx;" src="@/static/nodata.png">
						
							  </image>
							</view>
							<view>
							  <p>没有找到相关的订单信息</p>
							  <p>可以试试登录哦</p>
							</view>
		
					</div>
					<div v-if="
						!(orderListConfirm == [] || orderListConfirm == '' || orderListConfirm == null)
					  "
								class="all-box">
					<scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true" @scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
						<view class="orders-item" v-for="(item, index) in orderListConfirm" :key="index">
							<div class="content-item">
								<view class="item-left" @click="toAvailableOrderThree(item.orderId)">
									<view class="border-left">
										<view class="title-name-top">
											<view class="goods-info-name">物品信息：</view>
											<view class="title-intro-top">
												{{item.remark}}
											</view>
										</view>
										<br>
										<view class="title-name">
											<view class="goods-info">地址：</view>
											<view class="title-intro">
												{{item.orderFromAddress}}
												
											</view>
											<!-- <view class="show-order-detail">
												查看详情
											</view> -->
										</view>	
										
									</view>

								</view>
								<view class="item-right" @click="confirmOrder(item.orderId,index)">
									<view class="click-img">
										<image style="width: 80rpx;height: 80rpx;" src="@/static/tabbar/orderOut.png" alt=""></image>
									</view>
									<view class="oldKeyItem">
										<view class="clickItem">送达</view>
									</view>
								</view>								
							</div>

						</view>
						<view class="" style="height: 70rpx;">
						
						</view>
					</scroll-view>	
					</div>
				</swiper-item>
				
				<swiper-item class="swiperitem-content">
					<div class="empty" v-if="historyList == [] || historyList == '' || historyList == null">
							<view>
							  <image style="width: 320rpx; height: 240rpx; margin-left: 30rpx;" src="@/static/nodata.png">
						
							  </image>
							</view>
							<view>
							  <p>没有找到相关的订单信息</p>
							  <p>可以试试登录哦</p>
							</view>
		
					</div>
					<div v-if="
						!(historyList == [] || historyList == '' || historyList == null)
					  "
								class="all-box">
					<scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true" @scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
						<view class="orders-item" v-for="(item, index) in historyList" :key="index">
							<div class="content-item">
								<view class="item-left" @click="toAvailableOrderFour(item.orderId)">
									<view class="border-left">
										<view class="title-name-top">
											<view class="goods-info-name">物品信息：</view>
												<view class="title-intro-top">
												{{item.remark}}
												</view>
											</view>
											<br>
										<view class="title-name">
											<view class="goods-info">地址：</view>
												<view class="title-intro">
													{{item.orderFromAddress}}
												</view>
											</view>										
									</view>

								</view>
								<view class="item-right">
									<view class="click-img">
										<image style="width: 80rpx;height: 80rpx;" src="@/static/tabbar/orderRight.png" alt=""></image>
									</view>
									<view class="oldKeyItem-finish">
										<view class="clickItem" @click="toAvailableOrderFour(item.orderId,index)">查看</view>
									</view>
								</view>								
							</div>
						</view>
						<view class="" style="height: 70rpx;">
						
						</view>
					</scroll-view>	
					</div>
					
				</swiper-item>
<!-- 				<swiper-item class="" style="height: 20rpx;">
					
				</swiper-item> -->
			</swiper>				
		</view>
		
		</view>
		
	</view>
</template>

<script>
	import { listOrder,updateOrder} from "@/api/order";
	import {updateOrderTran,getOrderTran,insertTran} from "@/api/tran.js"
	import app from "@/App.vue";
	export default {
		data() {
			return {
				title: 'Hello',
				category:[
					{
						id:1,
						name:'可接订单',
					},
					{
						id:2,
						name:'待取订单',
					},
					{
						id:3,
						name:'已接订单',
					},
					{
						id:4,
						name:'确认送达',
					},
					{
						id:5,
						name:'历史订单',
					}
				
				],
				seachNumber:'',
				isActive: 0,
				index: 0,
				initType:0,
				currentindex:0,
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight:"",	
				goodsHeight:0,
				orderListTake:[],
				orderListTran:[],
				orderListCanTake:[],
				orderListConfirm:[],
				historyList:[],
				loadingType: "more", //加载更多状态
				loading:"",
				paramslast:{			  
				  pageNumber: 1,
				  pageSize: 10,
				},
				      // 查询参数
			  queryParams: {
				pageNum: 1,
				pageSize: 10,
				orderId: undefined,
				orderNumber: undefined,
				postmanPhone: undefined,
				partyPhone: undefined,
				orderParty: undefined,
				orderPostman: undefined,
				orderStatus:undefined,
				orderDept: undefined
			  },

			}
		},
		onShow() {
			let type=uni.getStorageSync(
				"taskHistory"
			)
			this.currentindex=parseInt(type) 
			uni.setStorageSync("taskHistory",0)
			if(app.globalData.nickName){
				
				this.queryParams.orderDept=app.globalData.deptId
				this.queryParams.orderStatus=undefined
				this.queryParams.orderPostman=app.globalData.userId
				console.log(this.queryParams)
				listOrder(this.queryParams).then(res => {
					console.log(res)
				  this.historyList = res.rows;
				  
					this.queryParams.orderPostman=undefined
					this.queryParams.orderDept=app.globalData.deptId
					this.queryParams.orderStatus='3'
					listOrder(this.queryParams).then(res => {
						console.log(res)
					  this.orderListCanTake = res.rows;
					  
						this.queryParams.orderDept=app.globalData.deptId
						this.queryParams.orderStatus='4'
						this.queryParams.orderPostman=app.globalData.userId
						console.log(this.queryParams)
						listOrder(this.queryParams).then(res => {
							console.log(res)
						  this.orderListTake = res.rows;
						  
				this.queryParams.orderDept=app.globalData.deptId
				this.queryParams.orderStatus='0'
				this.queryParams.orderPostman=app.globalData.userId
				console.log(this.queryParams)
				listOrder(this.queryParams).then(res => {
					console.log(res)
				  this.orderListTran = res.rows;
				  
				  this.queryParams.orderDept=app.globalData.deptId
				  this.queryParams.orderStatus='1'
				  this.queryParams.orderPostman=app.globalData.userId
				  console.log(this.queryParams)
				  listOrder(this.queryParams).then(res => {
				  	console.log(res)
				    this.orderListConfirm = res.rows;
				    
				  })	
				  
				})						  
						  
						})						  
					})					  
				  
				})
				

							

				

				
	
			}
		},
		onLoad(options) {

		},
		mounted() {

			console.log(this.orderListCanTake)
			this.getScrollW()  
			  var that = this;
			   //获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			  uni.getSystemInfo({
			        success: function (res) {
			  	         that.fullHeight ="height:" + res.windowHeight + "px";
						 console.log("我的高度为：",that.fullHeight);
			  	  }
			  	});
			  // 获取标题区域宽度，和每个子元素节点的宽度
			  this.getScrollW()
			  // if(this.storeType==0){
				 //  this.isActive = 2;
			  // }
			  // else if(this.storeType==1){
				 //  this.isActive = 1;
			  // }
			  // else{
				 //  this.isActive = 0;
			  // }
			  
			  
		  const { windowWidth, windowHeight } = uni.getSystemInfoSync();
		
		  let topHeight = 0;
		  let navHeight = 0;
		
		  uni.getSystemInfo({
		    success: function (res) {
		      // res - 各种参数
		
		      let top = uni.createSelectorQuery().select(".u-navbar");
		      top
		        .boundingClientRect(function (data) {
		          if (data && data.height) {
		            //data - 各种参数
		            topHeight = data.height; // 获取元素宽度
		          }
		        })
		        .exec();
		      let nav = uni.createSelectorQuery().select(".navbar");
		      nav
		        .boundingClientRect(function (data) {
		          if (data && data.height) {
		            //data - 各种参数
		            navHeight = data.height; // 获取元素宽度
		          }
		        })
		        .exec();
		    },
		  });
		  this.goodsHeight = windowHeight - navHeight - topHeight;
		  console.log("this.goodsHeight为：",this.goodsHeight);
		  // #ifdef APP-PLUS
		  this.goodsHeight = this.goodsHeight - 100;
		  // #endif
		  this.goodsHeight += "px";
		},
		watch:{
			// swiper与上面选项卡联动
			currentindex(newval){
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			orderListTake(){},
			orderListTran(){},
			orderListCanTake(){},
			historyList(){}
		},
		methods: {
			// 阻止页面滚动
			stop(){
				var box=function(e){passive: false ;};
				document.body.style.overflow='hidden';
				document.addEventListener("touchmove",box,false);
			},
			loadmore() {
			  this.paramslast.pageNumber++;
			  this.loadData();
			},
			//加载订单 ，带下拉刷新和上滑加载
			async loadData(type, loading) {
			  if (type == "refresh") {
			    this.orderListCanTake = [];
			  }
			  let orderListCanTake = [];
			  //没有更多直接返回
			  orderListCanTake = await getorderList(this.paramslast);	
			  console.log(orderListCanTake)
			  if (orderListCanTake.data.result.records.length < 3) {
			    this.loadingType = "noMore";
			  }
			  this.orderListCanTake.push(...orderListCanTake.data.result.records);	  
			  uni.hideLoading();
			
			},
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.category[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.category[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e){
				const {current} = e.detail;
				this.currentindex = current;
			
			},
			takeOrder(orderId,index){
				let self=this
				uni.showModal({
				        title: '提示',
				        // 提示文字
				        content: '确认接单该快递吗？',
				        // 取消按钮的文字自定义
				        cancelText: "取消",
				        // 确认按钮的文字自定义
				        confirmText: "确认",
				        //删除字体的颜色
				        confirmColor:'red',
				        //取消字体的颜色
				        cancelColor:'#000000',
				        success: function(res) {
							console.log(self.queryParams)
				        if (res.confirm) {
							
				            self.queryParams.orderId=orderId
				            self.queryParams.orderStatus='4'
				            self.queryParams.orderPostman=app.globalData.userId
							
				            updateOrder(self.queryParams).then(res => {
				            	console.log(res)
								self.orderListTake.push(self.orderListCanTake[index]);
								self.orderListCanTake.splice(index,1)
				            })
				        } 
				        else {
				            // 执行取消后的操作
				        }
				    }
				})
				
			},
			toTakeOrder(orderId,index,orderNumber){
				let self=this
				uni.showModal({
				        title: '提示',
				        // 提示文字
				        content: '确认已取到该快递吗？',
				        // 取消按钮的文字自定义
				        cancelText: "取消",
				        // 确认按钮的文字自定义
				        confirmText: "确认",
				        //删除字体的颜色
				        confirmColor:'red',
				        //取消字体的颜色
				        cancelColor:'#000000',
				        success: function(res) {
				        if (res.confirm) {
							self.queryParams.orderId=orderId
							self.queryParams.orderStatus='0'
							self.queryParams.orderPostman=app.globalData.userId
							updateOrder(self.queryParams).then(res => {
								console.log(res)
								self.orderListTran.push(self.orderListTake[index]);
								self.orderListTake.splice(index,1)
								// delete self.orderListTake[index]
								let formTran={}
								formTran.orderNumber=orderNumber
								formTran.orderTran="[]"
								console.log(formTran)
								  insertTran(formTran).then(res => {
									uni.showToast({
										title: '新增物流路线成功',
										//将值设置为 success 或者直接不用写icon这个参数
										icon: 'success',
										//显示持续时间为 2秒
										duration: 2000
									})  
									console.log(res)
								  })
							})
				        } 
				        else {
				            // 执行取消后的操作
				        }
				    }
				})

			},
			tranOrder(orderId,index){
				let self=this
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '确认已派送该快递吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "确认",
					//删除字体的颜色
					confirmColor:'red',
					//取消字体的颜色
					cancelColor:'#000000',
					success: function(res) {
					if (res.confirm) {
						self.queryParams.orderId=orderId
						self.queryParams.orderStatus='1'
						self.queryParams.orderPostman=app.globalData.userId
						updateOrder(self.queryParams).then(res => {
							console.log(res)
								self.orderListConfirm.push(self.orderListTran[index]);
								self.orderListTran.splice(index,1)
								// delete self.orderListTran[index]
						})
					} 
					else {
						// 执行取消后的操作
					}
					}
				})
			},
			confirmOrder(orderId,index){
				let self=this
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '确认已送达该快递吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "确认",
					//删除字体的颜色
					confirmColor:'red',
					//取消字体的颜色
					cancelColor:'#000000',
					success: function(res) {
					if (res.confirm) {
						self.queryParams.orderId=orderId
						self.queryParams.orderStatus='2'
						self.queryParams.orderPostman=app.globalData.userId
						updateOrder(self.queryParams).then(res => {
							console.log(res)
								self.historyList.push(self.orderListConfirm[index]);
								self.orderListConfirm.splice(index,1)
								// delete self.orderListTran[index]
						})
					} 
					else {
						// 执行取消后的操作
					}
					}
				})
			},
			toAvailableOrderOne(orderId){
				uni.setStorageSync("taskHistory",0)
				uni.navigateTo({
						url:'/pages/order/availableOrder?orderId='+orderId
				})
			},
			toAvailableOrderTwo(orderId){
				uni.setStorageSync("taskHistory",1)
				uni.navigateTo({
						url:'/pages/order/availableOrder?orderId='+orderId
				})
			},
			toAvailableOrderThree(orderId){
				uni.setStorageSync("taskHistory",2)
				uni.navigateTo({
						url:'/pages/order/availableOrder?orderId='+orderId
				})
			},
			toAvailableOrderFour(orderId){
				uni.setStorageSync("taskHistory",3)
				uni.navigateTo({
						url:'/pages/order/availableOrder?orderId='+orderId
				})
			},
			toAcceptedOrder(){
				// uni.navigateTo({
				// 		url:'/pages/order/acceptedOrder'
				// })
			},
			toSearchPage(){
				uni.navigateTo({
						url:'/pages/tabbar/task/search'
				})
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.all-box {
		background-color: #f7f7f7;
	}
	.content-item {
		flex-direction:row; display: flex;
		flex-wrap:wrap;
		width: 100%;
		height: 150rpx;
		padding-bottom: 30rpx;
		padding-left: 8rpx;
	}
	.title-name-top {
		padding-left: 20rpx;
		padding-top: 10rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 30rpx;
	}
	.title-name {
		display: inline-block;
		font-size: 30rpx;
		margin-left: 20rpx;
		margin-top: -21rpx;
		/* background-color: #2be783; */
		width: 100%;
	}
	.show-order-detail {
		display: inline-block;
		float: right;
		color: #4e4eec;
		margin-right: 60rpx;
	}
	.border-left{
		/* background-color: #2be783; */
		/* margin-top: 22rpx; */
		width: 500rpx;
		height: 135rpx;
		border-right:2px solid #c5c5c5;
	}
	.oldKeyItem {
		float: right;
	    padding: 4rpx 20rpx;
		padding-right: 5rpx;
		margin-left: 8rpx;
		color: #ffffff;
	    background: #f79d35;
		padding-left: 16rpx;
	    width: 60rpx;
		height: 30rpx;
	    border-radius: 100px;
	    font-size: 24rpx;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    margin-bottom: 20rpx;
	  
	}
	.oldKeyItem-finish{
		float: right;
	    padding: 4rpx 20rpx;
		padding-right: 5rpx;
		margin-left: 8rpx;
		color: #ffffff;
	    background: #2be783;
		padding-left: 16rpx;
	    width: 60rpx;
		height: 30rpx;
	    border-radius: 100px;
	    font-size: 24rpx;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    margin-bottom: 20rpx;		
	}
	.clickItem{
		padding-left: 0rpx;
		padding-bottom: 2rpx;
		
	}
	.title-intro-top {
		overflow : hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;  /* 设置超出多少行隐藏 */
		-webkit-box-orient: vertical;
		margin-right: 55rpx;
		display: -webkit-box;
		font-size: 30rpx;
		margin-top: -15rpx;
		color: #9a9a9a;
	}
	.title-intro {
		overflow : hidden;
	    text-overflow: ellipsis;
	    -webkit-line-clamp: 2;  /* 设置超出多少行隐藏 */
	    -webkit-box-orient: vertical;
		margin-right: 55rpx;
	    display: -webkit-box;
		font-size: 30rpx;
		margin-top: -21rpx;
		color: #9a9a9a;
		
	}
	.goods-info-name {
		margin-bottom: 10rpx;
	}
	.goods-info-top {
		display: inline-block;
		margin-top: -22rpx;
		float: left;
	}
	.goods-info{
		/* background-color: #2be783; */
		display: inline-block;
		margin-top: -25rpx;
		float: left;
	}
	.orders-item {
		width: 92%;
		margin-left: 4%;
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.item-left{
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around; 
		/* background-color: #DE0516; */
	}
	.item-right{

		margin-left: 50rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
	}
	.click-img{
		margin-left: 8rpx;

	}
	.click-img img{

		width: 80rpx;
		height: 80rpx;
	}
	.content-one{
		
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		font-size: 18px;
		font-weight: 500;
		color: #000;
	}
	.swiper-wrapper {
		/* height: 100rpx; */
		/* position: absolute; */
		/* position: fixed; */
		margin-top: 250rpx;
	}
	.swiper-content{
		position: fixed;
		background-color: #f7f7f7;
		border-radius: 15px 50px 30px 5px;
		flex: 1;
		width: 100%;
		height: 100%;
		margin-bottom: 50rpx;
	}	
	.swiperitem-content{
	    background-color: #ffffff;
		/* background-color: #2be783; */
		/* height: 200rpx; */
		width: 100%;
		/* margin-bottom: 500rpx; */
	}
	.nav_item{
		border-radius: 15px 50px 30px 5px;
		background-color: #FFFFFF;
		padding:20rpx 40rpx 0rpx 40rpx ;
		
	}
	.nav{
		border-radius: 0 0 1.2em 1.2em;
		background-color: #ffcfc0fa;	
		position: fixed;
		z-index: 991;
		margin-top: -5rpx;
		width: 100%;
		align-items: center;
		height: 260rpx;
	}
	.input-number {
		background-color: #fff;
		width: 450rpx;
		height: 40rpx;
		border-radius: 20rpx;
		margin-top:35rpx;
		margin-left: 120rpx;
		margin-top: 80rpx;
	}
	.tab-scroll{
		/* background-color: #000; */
		flex: 1;
		overflow: hidden;
		box-sizing: border-box;
		/* margin-top: 100rpx; */
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.tab-scroll_box{
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		box-sizing: border-box;
	/* 	height: 100rpx; */
	}
	.tab-scroll_item{
		line-height: 90rpx;
		margin-right: 70rpx;
		margin-left: 10rpx;
		flex-shrink: 0;
		padding-bottom:10px;
		display: flex;
		justify-content: center;
		
		padding-top: 10px;
	}
	.active {
		position: relative;
		font-size: 22px;
		color: #DE0516 ;
		font-weight: 500;
	}
	.active::after {
		content: "";
		font-size: 20px;
		position: absolute;
		width: 130rpx;
		height: 4rpx;
	
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.empty {
	  padding-top: 300rpx;
	  color: #999999;
	  text-align: center;
	  /deep/ .u-image {
	    width: 346rpx;
	    height: 304rpx;
	  }
	  }
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
</style>
